<template>
	<view class="app app-bg">
		<view class="main">
			<view class="title">请在下面方框中签字确认</view>
			<signature v-model="sign" class="box" ref="sig"></signature>
			<view class="mask" v-if="!sign" @tap="startSign">请在此处签字</view>
		</view>
		<view class="btn" @tap="add">确认</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖
import signature from "@/components/sin-signature/sin-signature.vue"

export default {
	components: { signature },
	data() {
		return {
			oid: "",
			sign: ""
		}
	},
	onLoad(opt) {
		if (opt.id) {
			this.oid = opt.id
		} else {
			vk.toast("参数不足", "none", 800, () => {
				vk.navigateBack()
			})
		}
	},
	methods: {
		// 签名
		async startSign() {
			await this.$refs.sig.getSyncSignature()
		},
		// 确认
		add() {
			if (!this.sign) {
				return vk.toast("请签字")
			}
			vk.callFunction({
				url: "client/order.confirmMyOrder",
				title: "提交中...",
				data: { oid: this.oid, sign: this.sign }
			}).then(() => {
				vk.toast("提交成功", "none", 800, () => {
					vk.navigateBack()
					uni.$emit("paySuccess")
					uni.$emit("paySuccessTab")
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 20rpx;
}

.main {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 40rpx 20rpx 54rpx;
	position: relative;

	.title {
		font-size: 28rpx;
		font-weight: bold;
		padding-bottom: 22rpx;
	}

	.box {
		background-color: #f5f5f5;
		border-radius: 12rpx;
		height: 300rpx;
	}

	.mask {
		position: absolute;
		bottom: 202rpx;
		left: 50%;
		transform: translate(-50%, 50%);
		color: #999999;
	}
}

.btn {
	background-color: #24C388;
	border-radius: 40rpx;
	padding: 20rpx;
	text-align: center;
	color: #fff;
	margin: 280rpx 6rpx 0;
}
</style>
